<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OOP - Drag</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 300px;
            height: 100px;
            background: #9da;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<script>

    window.onload = function () {
        new Drag('div1');
    };

function Drag(id) {
        var _this = this;
        this.disX =0;
        this.disY =0;
        this.oDiv=document.getElementById(id);
        this.oDiv.onmousedown=function (e) {
            _this.fnDown(e);
        }
    };

    Drag.prototype.fnDown=function(e) {
        var _this = this;
        var oEvent = e||event;
        this.disX =oEvent.clientX - this.oDiv.offsetLeft;
        this.disY =oEvent.clientY - this.oDiv.offsetTop;
        document.onmousemove =function (e) {
            _this.fnMove(e);
        }
        document.onmouseup = function () {
            _this.fnUp();
        };
    }
    Drag.prototype.fnMove = function(e) {
        var _this = this;
        var oEvent = e||event;
        this.oDiv.style.left = oEvent.clientX - this.disX+'px';
        this.oDiv.style.top = oEvent.clientY - this.disY+'px';
    }
    Drag.prototype.fnUp = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
</script>
</body>
</html>







